<template>
    <div>
        <Row>
            <h/>
        </Row>
        <Row>
            <Row>
                <Col span="24" align="left" class="main-tabs">
                    <Tabs :value="currTabName" :animated="false">
                        <TabPane label="网站首页" name="1">
                            <Index/>
                        </TabPane>
                        <TabPane label="视频监控" name="3">
                            <Spjk/>
                        </TabPane>
                        <TabPane label="LED大屏" name="4">
                            <Fdbj/>
                        </TabPane>
                        <TabPane label="门禁系统" name="5">
                            <Mjxt/>
                        </TabPane>
                        <TabPane label="综合布线" name="6">
                            <Zhbx/>
                        </TabPane>
                        <TabPane label="关于我们" name="2">
                            <Guanyu/>
                        </TabPane>
                        <TabPane label="新闻资讯" name="7">
                            <xwzx/>
                        </TabPane>

                    </Tabs>
                </Col>
            </Row>
        </Row>
        <Row>
            <f/>
        </Row>
        <BackTop>
            <div class="top">TOP</div>
        </BackTop>
    </div>
</template>

<script>
    import h from '../components/h.vue'
    import f from '../components/f.vue'
    import Index from '../components/tabs/Index.vue'
    import Spjk from "../components/tabs/Spjk";
    import Guanyu from "../components/tabs/Guanyu";
    import Fdbj from "../components/tabs/Fdbj";
    import Mjxt from "../components/tabs/Mjxt";
    import Xwzx from "../components/tabs/Xwzx";
    import Zhbx from "../components/tabs/zhbx";

    export default {
        name: 'Home',
        components: {
            Zhbx,
            Xwzx,
            Mjxt,
            Fdbj,
            Guanyu,
            Spjk,
            h,f,Index
        },
        data() {
            return {
                currTabName:'1',
                indexItem: 0,
                indexItem2: 0
            }
        }
    }
</script>

<style scoped>
    .top{
        padding: 20px;
        background: rgba(172, 172, 172, 0.7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }


</style>

<style>

    .main-tabs >.ivu-tabs > .ivu-tabs-bar {
        padding-left: 16.66666% ;
        border: none;
        background-color: #2375b3;
        color: #FFFFFF;
        margin-bottom: 0;
    }
    .main-tabs >.ivu-tabs > .ivu-tabs-bar .ivu-tabs-nav-container {
        line-height: 2.5;
    }
    .main-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
        border: none;
        background-color: #3d944c;
        color: #FFFFFF;
    }


</style>
